<template>
  <div ref="container" style="height:100%;text-align: left;"></div>
</template>
<script>
import * as monaco from "monaco-editor";
export default {
  $monacoEditor: null,
  model: {
    prop: "value",
    event: "onValueChange"
  },
  props: {
    value: {
      type: String,
      default: ""
    },
    language: {
      type: String,
      default: "html"
    },
    theme: {
      type: String,
      default: "vs"
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    editorOptions: {
      type: Object,
      default: function () {
        return {
          selectOnLineNumbers: true,
          roundedSelection: false,
          //readOnly: false,        // 只读
          cursorStyle: "line", //光标样式
          automaticLayout: true, //自动布局
          glyphMargin: true, //字形边缘
          useTabStops: false,
          fontSize: 28, //字体大小
          autoIndent: true //自动缩进
          //quickSuggestionsDelay: 500,   //代码提示延时
        };
      }
    }
  },
  data() {
    return {
      themeOption: [
        {
          value: "vs",
          label: "默认"
        },
        {
          value: "hc-black",
          label: "高亮"
        },
        {
          value: "vs-dark",
          label: "深色"
        }
      ],
      valueCopy: null //内容备份
    };
  },
  computed: {
  },
  watch: {
    options: {
      deep: true,
      handler(options) {
        this.$monacoEditor.updateOptions(options);
      }
    },

    value(newValue) {
      if (newValue !== this.$monacoEditor.getValue()) {
        this.$monacoEditor.setValue(newValue);
      }
    },

    language(newVal) {
      this.$monacoEditor.setModelLanguage(this.$monacoEditor.getModel(), newVal);
    },

    theme(newVal) {
      this.$monacoEditor.setTheme(newVal);
    }
  },
  created() {
    this.$nextTick(() => {
      this.initEditor();
    });
  },
  beforeDestroy() {
    this.$monacoEditor && this.$monacoEditor.dispose();
  },

  methods: {
    initEditor() {
      this.$el.innerHTML = "";
      this.$monacoEditor = monaco.editor.create(this.$el, {
        value: this.valueCopy || this.value,
        language: this.language,
        theme: this.theme,
        readOnly: this.readOnly,
        editorOptions: this.editorOptions
      });
      var layout = this.$minifox.debounce(this.layout, 200);

      layout();
      this.$monacoEditor.onDidChangeModelContent(event => {
        //编辑器内容changge事件
        this.valueCopy = this.$monacoEditor.getValue();
        this.$emit("onValueChange", this.$monacoEditor.getValue(), event);
      });
      this.$emit("onMounted", this.$monacoEditor); //编辑器创建完成回调

    },
    layout() {
      this.$monacoEditor.layout();
    },
    insertContent(text) {
      if (this.$monacoEditor) {
        let selection = this.$monacoEditor.getSelection();
        let range = new monaco.Range(
          selection.startLineNumber,
          selection.startColumn,
          selection.endLineNumber,
          selection.endColumn
        );
        let id = { major: 1, minor: 1 };
        let op = {
          identifier: id,
          range: range,
          text: text,
          forceMoveMarkers: true
        };
        this.$monacoEditor.executeEdits("", [op]);
        this.$monacoEditor.focus();
      }
    }
  }
};
</script>
